var GoBack = React.createClass({
    getDefaultProps:function () {
        return{
            text : '返回顶部 1'
        }
    },
    getInitialState:function () {
        return{
            text: this.props.text
        }
    },
    render:function () {
        // console.log(111,this.props.text)
        // console.log(122,this.state.text)
        console.log(4,'render',arguments,this)

        return(
            <div>
                <span className="go-back" onClick={this.goBack}>{this.state.text}</span>
                {/*<span className="go-back" onClick={this.props.parentGoBack}>{this.props.text}</span>*/}
            </div>
        )
    },
    goBack:function (e,id,e1) {
        // window.scrollTo(0,0);
        console.log(123,this);
        // console.log(this);
        this.props.parentGoBack(e,id,e1);
    },
    //定义事件
    componentDidMount:function () {
        // window.onscroll=function () {
        //     //大于200显示返回顶部
        //     if(window.scrollY>=300){
        //         //更新状态
        //         this.setState({text : '返回顶部2'});
        //     }else {
        //         this.setState({text : '网址导航'});
        //     }
        // }.bind(this)
    },
    //定义组件存在期的五个阶段
    //1 组件即将接受新的属性数据
    componentWillReceiveProps :function (newProps) {
        console.log(newProps,this.props);{/* 参数是新的属性数据 旧的状态数据可以通过this访问*/}
        console.log(1,'componentWillReceiveProps',arguments,this)
        //更新状态数据
        this.setState({text:newProps.text});
    },
    //2 组件是否应该更新组件
    shouldComponentUpdate:function (newProps,newState) {
        console.log(2,'shouldComponentUpdate',arguments,this);
        if(newState.text === this.state.text){
            return false;
        }else{
            return true;
        }
    },
    //3 组件将要更新
    componentWillUpdate:function () {
        console.log(3,'componentWillUpdate',arguments,this)
        //访问旧的dom元素
        console.log('123123123',ReactDOM.findDOMNode(this).innerHTML);
    },
    // 4 更新组件 render

    //5 组件更新完成
    componentDidUpdate:function () {{/* 第一个参数是旧的属性数据，第二个参数是旧的状态数据，新的状态数据，属性数据可以通过this访问*/}
        console.log(5,'componentDidUpdate',arguments,this.state,this.props,this,ReactDOM.findDOMNode(this).innerHTML)

    }
});
var Slider = React.createClass({
    //定义默认属性数据
    getDefaultProps:function () {
        return{
            text : '网址导航'
        }
    },
    //定义初始化状态数据
    getInitialState:function () {
        return{
            text: '今日头条'
        }
    },
    //渲染组件
    render:function () {
        console.log(222,this.state.text)

        return(
            <div className="slider">
                {/*定义GoBack组件就是子组件*/}
                {/* 传递给子组件，字符串，属性数据，状态数据，方法  */}
                <GoBack color="red" parentProps={this.props.text} parentText={this.state.text} text={this.state.text} parentGoBack={this.parentGoBack}/>
            </div>
        )
    },
    //定义方法
    parentGoBack :function () {
        console.log('parent Event',this,arguments)
    },
    //绑定滚动事件
    componentDidMount:function () {
        window.onscroll=function () {
            //大于200显示返回顶部
            if(window.scrollY>=300){
                //更新状态
                this.setState({text : '返回顶部2'});
            }else {
                this.setState({text : '网址导航'});
            }
        }.bind(this)
    }


});
ReactDOM.render(<Slider/>,app);